<template>
    <div class="app-container">
        <h1>{{ titleName }}</h1>
        <el-card shadow="hover" style="height:160px">
                <div style="width:1140px;height:150px;margin-top: 20px;">
                    <img src="../../assets/avatar/管理-圆.png" style="width:70px;height: 70px;float: left;" />
                    <div style="margin-left:25px;float:left;margin-top: -20px;">
                        <span style="font-weight: 900;font-size: large;">
                            {{ cinemaForm.cinemaName }}
                        </span><br><br>
                        <span style="font-size: small;margin-top: 10px;">影院编号： {{ cinemaForm.cinemaNumber
                        }}</span><br><br>
                        <span style="font-size: small">
                            管理员： {{ cinemaForm.admin }}
                        </span><br><br>
                        <!-- <span style="font-size: small">
                            联系人电话：{{ cinemaForm.phone }}
                        </span><br> -->
                    </div>
                    <div style="float:left;margin-left: 110px;font-size:small">
                        <span style="float: left">
                            <span>入驻时间：{{ cinemaForm.entryTime }}</span><br><br>
                            <span>影院联系人：{{ cinemaForm.principal }}</span><br><br>
                            <span><el-button type="info">查看联系人信息</el-button></span>
                        </span>
                    </div>
                    <div style="float:left;margin-left: 220px;margin-top: -10px;">
                        <div style="width:120px;height:105px;border-left: dashed 2px;float:left;">
                            <span style="margin-left: 45px;">
                                <svg-icon icon-class="播放" style="width:30px;height:30px"></svg-icon><br>
                                <div style="width:120px;height:105px;text-align: center;">
                                    <br><i style="font-size: small;">在映电影数</i><br>
                                    <i>35</i>
                                </div>
                            </span>
                        </div>
                        <div style="width:120px;height:105px;float:left;">
                            <span style="margin-left: 45px;">
                                <svg-icon icon-class="新订单" style="width:30px;height:30px"></svg-icon><br>
                                <div style="width:120px;height:105px;text-align: center;">
                                    <br><i style="font-size: small;">订单数量</i><br>
                                    <i>54</i>
                                </div>
                            </span>
                        </div>
                        <div style="width:120px;height:105px;float:left;">
                            <span style="margin-left: 45px;">
                                <svg-icon icon-class="金额" style="width:30px;height:30px"></svg-icon><br>
                                <div style="width:120px;height:105px;text-align: center;">
                                    <br><i style="font-size: small;">交易金额</i><br>
                                    <i>65474</i>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </el-card>


    </div>
</template>

<script>
import { importDic } from '@/utils'
import { getCinemaDetail, addOrUpdateCinema } from '@/api/cinema'
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            cinemaForm: {
                cinemaLogo: '',
                cinemaName: '',
                cinemaNumber: '',
                principal: '',
                entryTime: '',
                admin: '',
                address: '',
                status: 1,
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                loading: 0
            },
            showNoSee: false,
            showBtn: true,
            titleName: '',
            mode: this.$route.query.mode,
            id: this.$route.query.id,
            formDisabled: false,
            cinemaStatusList:importDic('cinemaStatus') 
        }
    },
    watch: {
        mode: {
            handler: function (mode) {
                if (this.mode === 'add') {
                    this.titleName = '新建'
                }
                if (this.mode === 'edit') {
                    this.titleName = '编辑'
                    this.getCinemaDetail()
                }
                if (this.mode === 'detail') {
                    this.titleName = '详情'
                    this.formDisabled = true
                    this.showBtn = false
                    this.showNoSee = true
                    this.seeCommentButton = true
                    this.getCinemaDetail()
                }
            },
            immediate: true
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate().then(() => {
                this.loading++
                addOrUpdateCinema(this.cinemaForm, getToken()).then(res => {
                    this.$router.push("/cinema")
                    this.$message.success(res.message)
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        },
        back() {
            this.$router.push("/cinema");
        },
        getCinemaDetail() {
            this.loading++
            getCinemaDetail(this.id, getToken()).then(res => {
                console.log('getCinemaDetail' + res.result)
                this.cinemaForm = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        }
    }
}
</script>